import '../scss/collections.scss';

import Header from '../components/header/index'
import NoContentTip from '../components/no_content_tip/index'
import NewsItem from '../components/news_item/index'

import tools from '../utils/tools'

const header = new Header(),
			noContentTip = new NoContentTip(),
			newsItem = new NewsItem()

const App = ($) => {
	const $app = $('#app'),
				$list = $app.children('.list'),
				collections = JSON.parse(localStorage.getItem('collections'))

	const init = () => {
		render().then(bindEvent)
	}

	const render = () => {
		return new Promise((resolve, reject) => {
			_renderHeader()
			if (!collections || Object.keys(collections).length === 0) {
				_renderNoContentTip('没收藏新闻')
			} else {
				_renderList(collections)
			}
			resolve()
		})
	}

	const bindEvent = () => {
		$list.on('click', '.news_item', toDetailPage)
	}

	const _renderHeader = () => {
		$app.append(header.tpl({
			title: "我的收藏",
			showLeftIcon: true,
			showRightIcon: false
		}))
	}

	const _renderNoContentTip = (text) => {
		$app.append(noContentTip.tpl(text))
	}

	const _renderList = (data) => {
		$list.append(newsItem.tpl(_arrangeDatas(data)))
		tools.thumbShow($('.news-thumb'))
	}

	function _arrangeDatas(data) {
		let _arr = []

		for (let key in data) {
			_arr.push(data[key])
		}

		return _arr
	}

	function toDetailPage() {
		var $this = $(this),
				url = $this.attr('data-url'),
				uniquekey = $this.attr('data-uniquekey') 

		localStorage.setItem('target', JSON.stringify(collections[uniquekey]))
		window.location.href = `detail.html?news_url=${url}&uniquekey=${uniquekey}`
	}

	init()
}

App(Zepto)